<template>
  <div class="dashboard-editor-container">
    <el-row
      style="margin-bottom: 32px; display: flex; justify-content: flex-end"
    >
      <el-date-picker
        v-model="date"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        @change="getOrderStatistics"
      ></el-date-picker>
    </el-row>
    <panel-group
      @handleSetLineChartData="handleSetLineChartData"
      :orderTotal="orderTotal"
    />

    <el-row class="el-row-line">
      <div>
        <h4>用户增长趋势图</h4>
        <el-select
          size="mini"
          @change="changeMonth('month1')"
          v-model="month1"
          class="select"
        >
          <el-option
            v-for="item in months"
            :value="item"
            :label="item + '个月'"
            :key="item"
          ></el-option>
        </el-select>
        <line-chart :chart-data="userGrowthStatisticsData" />
      </div>
      <div>
        <h4>订单销量趋势图</h4>
        <el-select
          size="mini"
          @change="changeMonth('month2')"
          v-model="month2"
          class="select"
        >
          <el-option
            v-for="item in months"
            :value="item"
            :label="item + '个月'"
            :key="item"
          ></el-option>
        </el-select>
        <line-chart :chart-data="ordersGrowingStatistics" />
      </div>
      <div>
        <h4>订单销售金额趋势图</h4>
        <el-select
          size="mini"
          @change="changeMonth('month3')"
          v-model="month3"
          class="select"
        >
          <el-option
            v-for="item in months"
            :value="item"
            :label="item + '个月'"
            :key="item"
          ></el-option>
        </el-select>
        <line-chart :chart-data="orderMoneyGrowingStatistics" />
      </div>
    </el-row>

    <!-- <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <raddar-chart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <pie-chart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <bar-chart />
        </div>
      </el-col>
    </el-row>-->
  </div>
</template>

<script>
import PanelGroup from "./dashboard/PanelGroup";
import LineChart from "./dashboard/LineChart";
import RaddarChart from "./dashboard/RaddarChart";
import PieChart from "./dashboard/PieChart";
import BarChart from "./dashboard/BarChart";
import {
  queryOrderStatistics,
  queryUserGrowthStatistics,
  queryOrdersGrowingStatistics,
  queryOrderMoneyGrowingStatistics,
} from "@/api/system/index";

export default {
  name: "Index",
  components: {
    PanelGroup,
    LineChart,
    RaddarChart,
    PieChart,
    BarChart,
  },
  data() {
    return {
      date: null,
      orderTotal: {
        orderTotalAmount: 0,
        orderTotalGroupAmount: 0,
        orderTotalMoney: 0,
        orderTotalSeckillAmount: 0,
      },
      userGrowthStatisticsData: null,
      ordersGrowingStatistics: null,
      orderMoneyGrowingStatistics: null,
      months: [6, 12, 18, 24],
      month1: 6,
      month2: 6,
      month3: 6,
    };
  },

  mounted() {
    const year = new Date().getFullYear();
    const month = new Date().getMonth() + 1;
    const day = new Date().getDate();
    const now = year + "/" + month + "/" + day + " 00:00:00";
    const old = year + "/" + month + "/" + day + " 00:00:00";
    this.date = [old, now];
    this.getOrderStatistics();
    this.getUserGrowthStatistics();
    this.getOrdersGrowingStatistics();
    this.getOrderMoneyGrowingStatistics();
  },
  methods: {
    getOrderStatistics() {
      const postData = this.date
        ? {
            startTime: this.filterDate(new Date(this.date[0])),
            endTime: this.filterDate(new Date(this.date[1])),
          }
        : null;
      queryOrderStatistics(postData).then((res) => {
        this.orderTotal = res.data;
      });
    },
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type];
    },
    getUserGrowthStatistics() {
      queryUserGrowthStatistics({
        month: this.month1,
      }).then((res) => {
        const data = res.data;
        this.userGrowthStatisticsData = {
          xData: data.map((item) => item.key),
          yData: data.map((item) => item.value),
          legendName: "用户增长趋势图",
          name: "用户增长",
        };
      });
    },
    getOrdersGrowingStatistics() {
      queryOrdersGrowingStatistics({
        month: this.month2,
      }).then((res) => {
        const data = res.data;
        this.ordersGrowingStatistics = {
          xData: data.map((item) => item.key),
          yData: data.map((item) => item.value),
          legendName: "订单销量趋势图",
          name: "订单销量",
        };
      });
    },
    getOrderMoneyGrowingStatistics() {
      queryOrderMoneyGrowingStatistics({
        month: this.month3,
      }).then((res) => {
        const data = res.data;
        this.orderMoneyGrowingStatistics = {
          xData: data.map((item) => item.key),
          yData: data.map((item) => item.value),
          legendName: "订单销售金额趋势图",
          name: "订单销售金额",
        };
      });
    },
    changeMonth(field) {
      switch (field) {
        case "month1":
          this.getUserGrowthStatistics();
          break;
        case "month2":
          this.getOrdersGrowingStatistics();
          break;
        case "month3":
          this.getOrderMoneyGrowingStatistics();
          break;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
.el-row-line {
  background: #fff;
  padding: 16px 16px 0;
  margin-bottom: 32px;
  display: flex;
  justify-content: space-around;
  div {
    flex: 1;
    position: relative;
    h4 {
      position: absolute;
      left: 20px;
      top: -24px;
      font-weight: 400;
    }
    .select {
      width: 120px;
      position: absolute;
      right: 10px;
      top: -6px;
      z-index: 1;
    }
  }
}
</style>
